<template>
    <div
        class="filter-text"
        @click="popupShow = !popupShow">
        <van-icon name="filter-o" />
        {{ $st("Filter") }}
    </div>
    <van-popup
        round
        class="customer-popup"
        v-model:show="popupShow"
        position="top"
        @close="onClose"
    >
        <div class="all-filter">
            <div class="title">{{ $st('wp-suo-zai-qu-yu') }}</div>
            <div class="flex-box">
                <template v-if="cityList.length > 0">
                    <div
                        v-for="item in cityList"
                        :key="item.logid"
                        class="flex1">
                        <van-button
                            v-if="item.city"
                            size="small"
                            @click="onClickCity(item)"
                            :class="[chooseCity && chooseCity.city  === item.city ? 'active-btn': '' , 'select-btn']"
                            round>{{ item.city }}</van-button>
                    </div>
                </template>
            </div>
            <div class="flex-box mb30 mt10">
                <van-field
                    center
                    v-model="searchFilter.regiontext"
                    :placeholder="$st('wp-qing-xuan-ze-di-qu')"
                    @click="onClickArea"
                    class="customer-filter-field"
                    readonly
                >
                    <template #right-icon>
                        <wp-icon
                            size="15"
                            name="pulldown" />
                    </template>
                </van-field>
            </div>
            <div v-if="tab === 'all'">
                <div class="title">{{ $st('wp-wei-bao-fu-ze-ren') }}</div>
                <div class="flex-box">
                    <template v-if="sellerList.length > 0">
                        <div
                            v-for="item in sellerList"
                            :key="item.logid"
                            class="flex1">
                            <van-button
                                v-if="item.administrator"
                                size="small"
                                @click="onClickSeller(item)"
                                :class="[chooseSeller && chooseSeller.administrator === item.administrator ? 'active-btn': '' , 'select-btn']"
                                round>{{item.alias}}</van-button>
                        </div>
                    </template>
                </div>
                <div class="flex-box mb30 mt10">
                    <van-field
                        center
                        v-model="searchFilter.seller_label"
                        :placeholder="$st('wp-qing-xuan-ze-wei-bao-fu-ze-ren')"
                        @click="memberPicker = true"
                        class="customer-filter-field"
                        readonly
                    >
                        <template #right-icon>
                            <wp-icon
                                size="15"
                                name="pulldown" />
                        </template>
                    </van-field>
                </div>
            </div>
            <div class="title">{{ $st('wp-chuang-jian-ri-qi') }}</div>
            <div class="flex-box mb30">
                <van-field
                    center
                    input-align="center"
                    class="customer-filter-field"
                    :placeholder="$st('wp_Start_Time')"
                    v-model="searchFilter.createstarttime"
                    @click="calendarShow = true"
                    readonly
                />
                <label class="label"> 一 </label>
                <van-field
                    center
                    input-align="center"
                    class="customer-filter-field"
                    :placeholder="$st('wp_End_Time')"
                    v-model="searchFilter.createendtime"
                    @click="calendarShow = true"
                    readonly
                />
            </div>
            <div class="title">{{ $st('wp-guan-jian-zi-cha-xun') }}</div>
            <div class="flex-box">
                <van-field
                    center
                    input-align="center"
                    class="customer-filter-field mr10"
                    :placeholder="$st('wp-ke-hu-id')"
                    v-model="searchFilter.customer_id"
                />
                <van-field
                    center
                    input-align="center"
                    class="customer-filter-field"
                    :placeholder="$st('wp-ke-hu-ming-cheng')"
                    v-model="searchFilter.customer_name"
                />
            </div>
            <div class="button-group">
                <van-button
                    round
                    block
                    type="primary"
                    class="button-left"
                    native-type="reset"
                    @click="resetForm"
                >
                    {{ $st("reset") }}
                </van-button>
                <van-button
                    round
                    block
                    class="button-right"
                    type="primary"
                    native-type="submit"
                    @click="submitForm"
                >
                    {{ $st("wp_submit") }}
                </van-button>
            </div>
        </div>
    </van-popup>
    <area-popup
        :region="searchFilter.region"
        :areaShow="areaPicker"
        @onAreaConfirm="onAreaConfirm"
        @onAreaCancel="areaPicker = false">
    </area-popup>
    <member-popup
        :memberShow="memberPicker"
        @onMemberConfirm="onMemberConfirm"
        @onMemberCancel="memberPicker = false"
    >
    </member-popup>
    <van-calendar
        v-model:show="calendarShow"
        type="range"
        color="#1989fa"
        :max-date="maxDate"
        :min-date="minDate"
        @confirm="onCalendarConfirm"
    >
    </van-calendar>
</template>

<script>
import AreaPopup from '@/components/_common/areaPopup.vue';
import MemberPopup from './memberPopup.vue';
import { reactive, toRefs, watch } from 'vue';
import moment from 'moment';
import useCustomerManageSetup from '@/setup/workbench/CustomerManageSetup.js';

export default {
    components: {
        AreaPopup,
        MemberPopup
    },
    props: {
        tab: String
    },
    emits: ['submit'],
    setup (props, context) {
        const { getCustomrecordSearchlog } = useCustomerManageSetup();
        const maxDate = new Date();
        const minDate = new Date();
        minDate.setMonth(minDate.getMonth() - 6);

        const state = reactive({
            popupShow: false,
            searchFilter: {
                createstarttime: '',
                createendtime: '',
                cstime: '',
                cetime: '',
                region: null,
                regiontext: '',
                seller_label: '',
                seller_account: '',
                country: '',
                province: '',
                city: '',
                customer_id: '',
                customer_name: ''
            },
            calendarShow: false,
            areaPicker: false,
            memberPicker: false,
            cityList: [],
            chooseCity: null,
            sellerList: [],
            chooseSeller: null
        });

        const onClose = () => {
            state.popupShow = false;
            if (!state.popupShow) {
                state.calendarShow = false;
                state.areaPicker = false;
                state.memberPicker = false;
            }
        };

        const onAreaConfirm = (area) => {
            state.searchFilter.country = area.country;
            state.searchFilter.province = area.province;
            state.searchFilter.city = area.city;
            state.searchFilter.region = area;
            state.searchFilter.regiontext = area.country + area.province + area.city;
            state.areaPicker = false;
            state.chooseCity = '';
        };

        const onMemberConfirm = (member) => {
            console.log(member);
            state.searchFilter.seller_label = member.label;
            state.searchFilter.seller_account = member.account;
            state.memberPicker = false;
            state.chooseSeller = '';
        };

        const onCalendarConfirm = (values) => {
            const [start, end] = values;
            state.searchFilter.createstarttime = moment(start).format('YYYY-MM-DD');
            state.searchFilter.createendtime = moment(end).format('YYYY-MM-DD');
            state.calendarShow = false;
        };

        const resetForm = () => {
            state.searchFilter = {
                createstarttime: '',
                createendtime: '',
                cstime: '',
                cetime: '',
                region: null,
                regiontext: '',
                seller_label: '',
                seller_account: '',
                country: '',
                province: '',
                city: '',
                customer_id: '',
                customer_name: ''
            };
            state.chooseSeller = null;
            state.chooseCity = null;
        };

        const submitForm = () => {
            onClose();
            console.log(state.searchFilter);
            state.searchFilter.cstime = state.searchFilter.createstarttime ? moment(state.searchFilter.createstarttime).startOf('day').format('YYYY-MM-DD HH:mm:ss') : '';
            state.searchFilter.cetime = state.searchFilter.createendtime ? moment(state.searchFilter.createendtime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
                : '';
            context.emit('submit', state.searchFilter);
        };

        const onClickCity = (item) => {
            state.chooseCity = item;
            state.searchFilter.country = item.country;
            state.searchFilter.province = item.province;
            state.searchFilter.city = item.city;
            state.searchFilter.regiontext = '';
        };

        const onClickArea = () => {
            state.areaPicker = true;
        };

        const onClickSeller = (item) => {
            state.chooseSeller = item;
            state.searchFilter.seller_account = item.administrator;
            state.searchFilter.seller_label = '';
        };

        // 保持数组里面有三个对象、多了删除、少了加空对象
        const handleArr = (arr) => {
            const num = 3;
            const len = arr.length;
            if (len === 0) return [];
            if (len < 3) {
                const diff = num - len;
                for (let i = 0; i < diff; i++) {
                    const obj = {};
                    arr.push(obj);
                }
            }
            if (len > 3) {
                // 删除元素剩下前三个
                arr.length = 3;
            }
            return arr;
        };

        const getSearchlog = () => {
            getCustomrecordSearchlog().then((data) => {
                state.cityList = handleArr(data.value.region);
                state.sellerList = handleArr(data.value.user);
            });
        };

        watch(() => state.popupShow, (newValue, oldValue) => {
            if (newValue) {
                getSearchlog();
            }
        });

        return {
            ...toRefs(state),
            maxDate,
            minDate,
            onClose,
            onAreaConfirm,
            onMemberConfirm,
            onCalendarConfirm,
            resetForm,
            submitForm,
            onClickCity,
            onClickArea,
            onClickSeller
        };
    }
};
</script>
<style lang="scss">
.customer-popup {
    margin-top: 60px;
}
</style>
<style lang="scss" scoped>
.filter-text {
    color: #fff;
}
.all-filter {
    padding: 15px;
    color: #000;
    .title {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .flex-box {
        display: flex;
        align-items: center;
        .flex1 {
            flex: 1;
            margin-right: 8px;
            &:last-child {
                margin-right: 0;
            }
        }
        .select-btn {
            width: 100%;
            font-size: 14px;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-left: 8px;
            padding-right: 8px;
        }
        .active-btn {
            border-color: #1890FF;
            color: #1890FF;
            background-color: #E8F4FF;
        }
        .customer-filter-field {
            height: 32px;
            line-height: 32px;
            background: #f6f6f6;
            border-radius: 16px;
        }
        .label {
            color: #cccccc;
            margin-left: 10px;
            margin-right: 10px;
        }
        .mr10 {
            margin-right: 10px;
        }
    }
    .select-box {
        height: 32px;
        background: #f6f6f6;
        border-radius: 16px;
        color: #c8c9cc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        margin-top: 10px;
        font-size: 14px;
    }
    .mb30 {
        margin-bottom: 30px;
    }
    .mt10 {
        margin-top: 10px;
    }
    .button-group {
        margin: 30px 5px 0px 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .button-left {
            font-size: 18px;
            color: #1890ff;
            opacity: 1;
            background: #e8f4ff;
            border: 1px solid #1890ff;
            border-radius: 20px 0px 0px 20px;
        }
        .button-right {
            font-size: 18px;
            color: #ffffff;
            opacity: 1;
            background: #1890ff;
            border-radius: 0px 20px 20px 0px;
        }
    }
}
</style>
